<template>
  <svg @click="onClick" class="t-icon" :style="style" aria-hidden="true">
    <use :xlink:href="`#${icon}`"></use>
  </svg>
</template>

<script>
import "@/assets/js/iconfont.js";
export default {
  props:{
    icon:{
      type:String,
      default:""
    },
    size:{
      type:[Number,String],
      default:24
    },
    color:{
      type:String,
      default:""
    },
  },
  computed:{
    style(){
      return `font-size: ${this.size}px;fill:${this.color};`
    },
  },
  methods:{
    onClick(){
      this.$emit('click')
    }
  }
};
</script>

<style lang="scss" scoped>
.t-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
  font-size: 30px;
}
</style>